<template>
	<view>
		<view class="container">
			<view class="wechatapp">
				<view class="header">
					<image src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250305/0166764001741159137.png"
						class="user_avatar"></image>
				</view>


				<view class="title">
					商城小程序
				</view>
				<view class="maek">
					不仅是满意而是惊喜
				</view>
			</view>
			<view>
				<view class="login-btn">
					<button class="button btn-normal" @click.stop="handleLogin">一键授权登录</button>
				</view>
			</view>




			<up-popup :show="show" @close="close" @open="open" mode="top">
				<view class="user_info">
					<view class="title">
						<view class="item_l">
							<image
								src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250305/0166764001741159137.png">
							</image>
						</view>
						<view class="item_r">
							<view>商城小程序</view>
							<text>请完善您的头像、昵称数据</text>
						</view>
					</view>

					<view class="user_form">
						<view class="item">
							<text>*头像</text>
							<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image
									:src="avatarUrl || 'https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20230912/0136722001694489451.png'"
									mode="widthFix"></image>
							</button>
						</view>

						<view class="item">
							<text>*昵称</text>
							<input type="nickname" class="nickname" v-model="nick_name" @blur="getnickname"
								placeholder="请输入你的昵称">
						</view>

						<view class="item">
							<text>*手机号</text>
							<button class="mobile" open-type="getPhoneNumber"
								@getphonenumber="getPhoneNumber">{{ mobile || '授权绑定手机号' }}</button>
						</view>

						<view class="item">
							<button class="send" @click="send">保存并登录</button>
						</view>
					</view>
				</view>
			</up-popup>
		</view>

		<Privacy />

	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';

	import {
		login,
		get_mobile
	} from "@/api/user.js"

	import {
		BASE_URL
	} from "@/utils/request.js"
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		useAuthStore
	} from '@/stores/user.js';
	
	import Privacy from './components/privacy.vue';
	const authStore = useAuthStore();


	const show = ref(false);
	const openid = ref(null);

	// 打开弹窗
	function open() {
		show.value = true;
	}
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	// 登录
	function handleLogin() {
		uni.login({
			timeout: 5000,
			async success(res) {
				await login({
					code: res.code
				}).then(res => {
					let data = res.data
					if (data.mobile) {
						let arr = data.experience ? data.experience.split(',') : '',
							user_info = {
								nick_name: data.nick_name,
								avatarUrl: data.avatarurl,
								mobile: data.mobile,
								user_id: data.user_id,
								experience: arr.includes(data.user_id),
								token: data.token
							}
						authStore.setLogin(true, user_info);
						// uni.setStorageSync("isLogin", true);
						// uni.setStorageSync('user_info', user_info);
						uni.navigateBack();

					} else {
						show.value = true;
						openid.value = data.openid
					}

				})
			},
			fail(res) {
				App.showError(res)
			},
		})
	}


	const avatarUrl = ref('');
	const nick_name = ref('');
	const mobile = ref('');

	//上传头像
	function onChooseAvatar(e) {
		wx.uploadFile({
			url: BASE_URL + `api.php?m=Api&c=Login&a=uploadHead`,
			filePath: e.detail.avatarUrl,
			name: 'file',
			formData: {
				openid: openid.value
			},
			success: function(res) {
				let data = JSON.parse(res.data);
				avatarUrl.value = data.data;
			}
		})
	}

	// 获取昵称
	function getnickname(e) {
		nick_name.value = e.detail.value;
	}
	// 获取手机号
	function getPhoneNumber(e) {
		if (e.detail.code) {
			get_mobile(e.detail.code).then(res => {
				mobile.value = res.data.phoneNumber;
			})
		} else {
			uni.showToast({
				title: '请选择需要授权的手机号',
				icon: 'none'
			})
		}
	}



	// 新用户保存信息
	function send() {
		if (!avatarUrl.value) {
			COMMON.Toast(`请上传头像`);
			return false
		} else if (!nick_name.value) {
			COMMON.Toast(`请填写昵称`);
			return false
		} else if (!mobile.value) {
			COMMON.Toast(`请填写手机号`);
			return false
		}

		let data = {
			avatarUrl: avatarUrl.value,
			nick_name: nick_name.value,
			mobile: mobile.value,
			openid: openid.value
		}
		login(data).then(res => {
			let data = res.data,
				arr = data.experience ? data.experience.split(',') : '',
				user_info = {
					nick_name: data.nick_name,
					avatarUrl: data.avatarUrl,
					mobile: data.mobile,
					user_id: data.user_id,
					experience: arr.includes(data.user_id),
					token: data.token
				}

			uni.setStorageSync("isLogin", true);
			uni.setStorageSync('user_info', user_info);
			uni.navigateBack();
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;

		.wechatapp {
			padding: 280rpx 0 48rpx;
			margin-bottom: 72rpx;
			text-align: center;
			border-bottom: 1rpx solid #e3e3e3;

			.header {
				width: 180rpx;
				height: 180rpx;
				border: 4rpx solid #fff;
				margin: 0 auto 0;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				font-size: 42rpx;
				margin: 30rpx 0;
				color: #333;
			}

			.maek {
				font-size: 28rpx;
				color: #666;
			}
		}

		.login-btn {
			padding: 0 10rpx;
		}
	}

	.user_info {
		width: 100%;
		height: 60vh;
		overflow: hidden;

		.title {
			width: 500rpx;
			margin: 80rpx auto;
			color: #333;
			overflow: hidden;

			.item_l {
				width: 120rpx;
				float: left;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 5px;
				}
			}

			.item_r {
				float: left;

				text {
					font-size: 24rpx;
				}

				view {
					padding-top: 10rpx;
				}
			}
		}

		.user_form {
			width: 500rpx;
			margin: auto;

			.item {
				width: 100%;
				overflow: hidden;
				line-height: 58rpx;
				margin-top: 40rpx;

				text {
					float: left;
					padding: 10rpx 0;
					font-size: 28rpx;
				}

				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
					padding: 0;
					float: right;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.nickname {
					width: 300rpx;
					float: right;
					background-color: #f8f8f8;
					font-size: 28rpx;
					padding: 10rpx;
					height: 60rpx;
					border-radius: 5px;
					text-align: right;
				}

				.mobile {
					width: 320rpx;
					padding: 0 10rpx;
					float: right;
					background-color: #f8f8f8;
					text-align: right;
					font-size: 28rpx;
					line-height: 80rpx;
					height: 80rpx;

					&::after {
						border: none;
					}
				}

				.send {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					background: #ff7500;
					color: #fff;
					font-size: 26rpx;
					border-radius: 100px;
					text-align: center;
				}

			}
		}
	}
</style>